In the previous chapter we looked at CSS1 properties, and using Style Master to work with them. CSS2 introduces many new properties, and Style Master Pro gives you control over these, with the same ease of use.
Some of the properties in CSS2 extend the properties in CSS1, while others are wholly new groups of properties. While using Style Master Pro, you'll find that some editors look a little different, with a number of new properties added. These include the Text Style, Text Layout, and Display Type editors. We will cover the changes to each of these editors in this chapter.
There are also several new editors, that provide for the editing of CSS2 properties. We will also cover each of these in detail.
CSS2 provides a considerable leap in power, and complexity. Unlike the quite straightforward properties of CSS1 (color for instance), many CSS2 properties are complicated, and require some study to understand. As such, you might find much of this chapter baffling. A little study of CSS2 will make it much less so, and to help you, we've provided a CSS Guide, which covers all of CSS1 and CSS2. As you read this chapter, each editor is linked to the Guide, and you can open the guide at the relevant part.
Special note: Each editor below is linked to our style sheets guide. If you want more information on a property, just click its window item, and the relevant part of the guide will open in the frame below. Still don't have the guide? See Welcome for details on where to get it.
The Printing editor lets you edit properties associated with the @page rule. For more on the @page rule see the chapter on Printing.
This editor lets you set
If you don't understand one of the properties in the Printing Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
CSS2 Style Sheets give you control over how pages are printed. This includes the ability to
The Page Break editor lets you edit these properties
If you don't understand one of the properties in the Page Break Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
The text shadow effect is a signature of the digital age. Print, and now web sites make heavy use of this effect to demonstrate how contemporary their message is. The only way to achieve this effect is to use text converted to an image. So CSS2 introduced a property that enables shadowing effects on any text.
The shadow property takes a list of shadow effects. Each effect specifies the top and left hand side for the shadow (raised or lowered from the original text), and an optional blur radius (that specifies how much the shadow is blurred) and color.
To create a text shadow effect
enter values for the top and left, and optionally for the blur and the color
click to add the effect to the list of those for this text-shadow. Repeat this process for additional effects.
To remove an effect
select it in the list of effects and click .
To edit an existing shadow effect
1. select the effect to edit in the list of effects, then edit the top, left and other aspects
2. click
If you don't understand one of the properties in the Text Shadow Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
CSS2 introduces new properties for more control over the user interface elements of a web page. These include control over the cursor shape while it hovers over a selected element, and the ability to place outlines around elements. An outline generally denotes that an element has the keyboard focus.
If you don't understand one of the properties in the User Interface Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
CSS2 allows for content to be inserted before or after elements. We've already seen the before and after pseudo element selectors. These enable the insertion of content before or after a selected element. The content property specifies the content to be inserted.
Only the before and after pseudo class selectors allows insertion, so only when you have selected one of these in your list of selectors will you be able to use this editor.
The editor comprises a list at the top, and several buttons. These buttons allow you to add particular types of content to the list. The contents of the list are inserted in the order they appear, either before or after the selected element (depending on whether it is a before or after selector).
To an entry to the list of those in the content property
1. choose list from the pop-up menu entitled Content. This specifies that the content will be a list of entries.
2. click the appropriate button
3. a window opens for creating the content
4. use the window to create the desired content (by entering a string, specifying a url, choosing a keyword)
5. click to close the editing window. The entry is added to the end of the content list
The only complex type of entry to add is a counter. If you understand the concept of counters this window should make perfect sense. If not, you should take a look at our CSS guide for more on content and counters.
To add a counter to the list of content
1. click
2. the counter editor opens
3. choose whether this should be a counters or a counter, using the pop-up menu at the top of the window
4. enter the name of the counter in the field labeled identifier
5. select the style for this counter from the pop-up menu labeled Style (this is optional)
6. if this is a counters, enter the string for separating instances of this named counter
7. click to close the editing window. The entry is added to the end of the content list
If all of this makes little sense, its time to learn a little more about generating content in CSS2.
Because the order of the entries in the content list is important, you can rearrange them by dragging and dropping them.
If you don't understand one of the properties in the Content Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
The quotes property allows different elements to have different quotation marks associated with them. This is a relatively specialized feature of CSS2. You might want blockquotes in English to use standard quotation marks for English (" and ") while those for French language elements to use the standard for that language (<< and >>). For more on this, see the section on quotes in our CSS Guide.
To specify opening and closing quotes
1. choose list in the pop-up menu labeled
2. enter the opening and closing quotes (one or more characters) in the fields labeled opening quote and closing quote
3. click
To change the quotation marks
1. click the entry in the list of quotes you want to edit, edit the marks
2. click
To Remove a set of marks from the list
1. select the set of marks to remove from the list
2. click
Why is there a list? CSS2 supports many levels of quotation. Each entry in the list is a level of quotation. The actual level of quotation that is applied is controlled by the content property.
You can rearrange the list by dragging entries around.
If you don't understand one of the properties in the Quotes Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
On the Macintosh, the Quotes and Counters Editors are rolled into one, while on Windows, they are separate.
Counters are another of the specialized and quite complicated aspects of CSS2. Counters are inserted into a document using the content property, but are controlled with two properties that you edit with the Counters editor. One of these properties increments a counter by a certain amount, while the other resets a counter to a particular value. For more on this topic, see the section on counters in our CSS Guide.
The two properties, counter-reset and counter-increment, each of which takes a list of counter names and values. For each property, you specify the name of the counter to be reset or incremented, and the value to be reset to or incremented by.
To add a counter and a value to the list for either property
1. choose list in the pop-up menu for the property you want to set
2. enter the name of the counter in the field labeled name
3. enter the value to reset or increment by in the field labeled set to
4. click to add this pair the list
To remove a counter pair from the list of either property
1. select the pair you want to remove from the list for that property
2. click
To edit a pair
1. select the pair you want to edit from the list for that property
2. enter the edited values in the relevant fields
3. click
If you don't understand one of the properties in the Content Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
As mentioned above, a number of the groups of properties we saw in CSS1 have had new properties added in CSS2.
Here we revisit these editors taking a look at the new properties.
CSS2 adds a number of new display types, and several new properties for some of these types. The Display Type editor lets you edit these new properties. For more detail on what has changed, see the CSS Guide.
If you don't understand one of the properties in the Display Type Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
CSS2 adds new text style properties, the font-size-adjust and font-stretch properties. For more on these properties, see our Guide.
If you don't understand one of the properties in the Page Layout Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
CSS2 provides two new text layout properties that allow for control over the direction that text flows in. Arabic and Hebrew, for instance, are drawn left to right, unlike Roman and many other scripts. The text-direction and bidi properties allow control over the direction that text flows in. For more, see our Guide.
If you don't understand one of the properties in the Page Layout Editor, or you just want some more information about it, click the window item that deals with it and that part of the Style Sheets Tutorial will appear in the frame below.
With CSS2 a font can be specified as one of the system fonts for the platform that the browser is running on. In Style Master Pro, the Font Editor includes a pop-up menu that enables you to specify that the font for that rule should be one of the system fonts. For more, see our Guide.
Next we learn how to use Style Master Pro to work with a number of important additions to style sheets in CSS2. If you are interested in CSS1 only, then you can jump onto using Style Master to preview your style sheets in any number of browsers, while you are editing them.